<template>
  <div id="app">
    <Loading v-if="loading" />
    <Navbar @changeMenuIndex="changeMenuIndex" />
    <router-view
      :totalData="totalData"
      :selectSign="selectSign"
      :selectView="selectView"
      @changeIsSelect2="changeIsSelect2"
      @changeIsSelect3="changeIsSelect3"
      @changeTimeIndex="changeTimeIndex"
      @changeIsTimeOperator="changeIsTimeOperator"
    ></router-view>
    <DragView
      v-if="
        $route.name !== 'login' &&
        $route.name !== 'my' &&
        $route.name !== 'forget' &&
        $route.name !== 'register'
      "
      :time-menu="timeMenu"
      :isShow="isShowDrag"
      :barTime="barTime"
      :predictVal="predictVal"
      :menuIndex="menuIndex"
      :timeIndex="timeIndex"
      :isSelect2="isSelect2"
      :isSelect3="isSelect3"
      :isTimeOperator="isTimeOperator"
      @changeViewTime="changeViewTime"
      @changePredict="changePredict"
      @getTotalData="getTotalData"
      @changeSelectSign="changeSelectSign"
      @changeSelectView="changeSelectView"
    ></DragView>
    <TimeBar
      v-if="
        $route.name !== 'login' &&
        $route.name !== 'my' &&
        $route.name !== 'forget' &&
        $route.name !== 'register' &&
        $route.name !== 'typhoonPredict'
      "
      :time-menu="timeMenu"
      :viewTime="viewTime"
      :predictVal="predictVal"
      :timeIndex="timeIndex"
      :isTimeOperator="isTimeOperator || $route.name === 'typhoon'"
      :predictLock="predictLock"
      @changeBarTime="changeBarTime"
      @showDrag="showDrag"
      @getTotalData="getTotalData"
      @changePredictLock="changePredictLock"
    ></TimeBar>
    <FooterNav></FooterNav>
    <div v-show="state.isShowMsg" :class="['msg', state.msgType]">
      <div class="msg-icon">
        <el-icon v-if="state.msgType === 'ok'" class="ok-icon">
          <circle-check-filled />
        </el-icon>
        <el-icon v-else-if="state.msgType === 'error'" class="err-icon">
          <circle-close-filled />
        </el-icon>
      </div>
      <span>{{ state.msgValue }}</span>
    </div>
  </div>
</template>

<script>
import Navbar from "./components/Navbar.vue";
import FooterNav from "./components/Footer.vue";
import TimeBar from "./components/TimeBar.vue";
import DragView from "./components/Drag/DragView.vue";
import Loading from "./components/Loading.vue";

export default {
  name: "App",
  components: {
    Navbar,
    FooterNav,
    DragView,
    TimeBar,
    Loading,
  },
  data() {
    return {
      state: this.$store.state.msgState,
      isShowDrag: true,
      viewTime: null,
      barTime: null,
      predictVal: null,
      totalData: null,
      loading: false,
      menuIndex: 0,
      timeIndex: 0,
      isSelect2: false,
      isSelect3: false,
      isTimeOperator: true,
      selectSign: 0,
      selectView: 0,
      predictLock: false,
      timeMenu: [
        //灾害天气识别QPE
        {
          startTime: new Date(2023, 7, 23, 4, 6),
          endTime: new Date(2023, 8, 7, 6, 42),
          minuteInterval: 6,
          hourInterval: 1,
          isNoTime: false,
        },
        //灾害天气识别QPE（光流法）
        {
          startTime: new Date(2023, 7, 25),
          endTime: new Date(2023, 8, 10, 23, 59),
          minuteInterval: 6,
          hourInterval: 1,
          isNoTime: true,
        },
        //灾害天气识别雷暴大雨 2
        //8/1-9/7只有00:00-04:00有数据
        //0908-0910全天有数据
        {
          startTime: new Date(2023, 7, 1),
          endTime: new Date(2023, 8, 7, 23, 59),
          minuteInterval: 6,
          hourInterval: 1,
          isNoTime: true,
        },
        //灾害天气预警雷暴大雨外推 3
        {
          startTime: new Date(2023, 7, 1),
          endTime: new Date(2023, 8, 10),
          minuteInterval: 6,
          hourInterval: 1,
          isNoTime: true,
          predict: {
            type: "minutes",
            scope: "6-120",
            interval: 6,
            additional: [],
          },
        },
        //灾害天气预警QPF/dbz 4
        {
          startTime: new Date(2023, 7, 1),
          endTime: new Date(2023, 8, 29, 19, 12),
          minuteInterval: 6,
          hourInterval: 1,
          isNoTime: true,
          predict: {
            type: "minutes",
            scope: "6-120",
            interval: 6,
            additional: [],
          },
        },
        //灾害天气预警降水量 5
        {
          startTime: new Date(2023, 7, 1),
          endTime: new Date(2024, 2, 22),
          minuteInterval: 6,
          hourInterval: 1,
          isNoTime: true,
          predict: {
            type: "minutes",
            scope: "6-120",
            interval: 6,
            additional: [],
          },
        },
        //灾害天气预警QPF(光流法) 6
        {
          startTime: new Date(2023, 7, 25),
          endTime: new Date(2023, 8, 9),
          minuteInterval: 6,
          hourInterval: 1,
          isNoTime: true,
          predict: {
            type: "minutes",
            scope: "6-120",
            interval: 6,
            additional: [],
          },
        },
        //灾害天气预警雷暴大风潜势概率 7
        {
          startTime: new Date(2023, 7, 1, 8, 0),
          endTime: new Date(2023, 8, 7, 20, 0),
          minuteInterval: 0,
          hourInterval: 12,
          isNoTime: true,
          predict: {
            type: "hours",
            scope: "1-12",
            interval: 1,
            additional: [],
          },
        },
        //灾害天气预警强降水 8
        {
          startTime: new Date(2023, 7, 1, 8, 0),
          endTime: new Date(2023, 8, 7, 20, 0),
          minuteInterval: 0,
          hourInterval: 12,
          isNoTime: false,
          predict: {
            type: "hours",
            scope: "1-12",
            interval: 1,
            additional: [],
          },
        },
        //灾害天气预警大风 9
        {
          startTime: new Date(2023, 8, 2),
          endTime: new Date(2023, 8, 7),
          minuteInterval: 0,
          hourInterval: 12,
          isNoTime: true,
          predict: {
            type: "hours",
            scope: "1-72",
            interval: 1,
            additional: [75, 78, 81, 84],
          },
        },
        //天气监测雷达拼图 10
        {
          startTime: new Date(2023, 7, 15),
          endTime: new Date(2023, 8, 15, 23, 54),
          minuteInterval: 6,
          hourInterval: 1,
          isNoTime: true,
        },
        //灾害事件预警内涝 
        {},
        //灾害事件预警风暴增水 12
        {
          startTime: new Date(2023, 7, 1),
          endTime: new Date(2023, 8, 29, 12),
          minuteInterval: 0,
          hourInterval: 12,
          isNoTime: false,
          predict: {
            type: "hours",
            scope: "1-72",
            interval: 1,
            additional: [],
          },
        },
        //灾害事件预警24小时最大增水 13
        {
          startTime: new Date(2023, 7, 1),
          endTime: new Date(2023, 8, 29, 12),
          minuteInterval: 0,
          hourInterval: 12,
          isNoTime: false,
          predict: {
            type: "hours",
            scope: "24-72",
            interval: 24,
            additional: [],
          },
        },
        // 综合监测洪涝监测 14
        {
          startTime: new Date(2023, 7, 1),
          endTime: new Date(2023, 8, 30),
          minuteInterval: 0,
          hourInterval: 12,
          isNoTime: true,
          isNoTimeBar: true, //什么都不需要
        },
        // 识别预警洪涝预测 15
        {
          startTime: new Date(2023, 7, 1),
          endTime: new Date(2023, 8, 30),
          minuteInterval: 0,
          hourInterval: 12,
          isNoTime: true,
          isNoTimeBar: true, //什么都不需要
        },
        // 靶向发布分区预警 16
        {
          startTime: new Date(2023, 7, 20, 1),
          endTime: new Date(2023, 8, 20, 23, 59),
          minuteInterval: 0,
          hourInterval: 1,
          isNoTime: false,
        },
        //灾害天气预警海葵台风路径预测 17
        {
          startTime: new Date(2023, 7, 1),
          endTime: new Date(2023, 8, 6),
          minuteInterval: 6,
          hourInterval: 1,
          isNoTime: true,
        },
        //地质灾害图谱 18
        {},
        //靶向发布新版 19
        {
          startTime: new Date(2023, 8, 1),
          endTime: new Date(2023, 8, 30, 23, 54),
          minuteInterval: 6,
          hourInterval: 1,
          isNoTime: true,
        },
      ],
    };
  },
  watch: {
    $route(to, from) {
      this.menuIndex = to.meta.menuIndex ? to.meta.menuIndex : 0;
    },
  },
  methods: {
    showDrag() {
      this.isShowDrag = !this.isShowDrag;
    },
    changeViewTime(newTime) {
      this.viewTime = newTime;
    },
    changeBarTime(newTime) {
      this.barTime = newTime;
    },
    changePredict(newPredict) {
      this.predictVal = newPredict;
      this.predictLock = true;
    },
    changeMenuIndex(newIndex) {
      this.menuIndex = newIndex;
    },
    changeTimeIndex(newIndex) {
      this.timeIndex = newIndex;
    },
    changeIsSelect2(newIsSelect2) {
      this.isSelect2 = newIsSelect2;
    },
    changeIsSelect3(newIsSelect3) {
      this.isSelect3 = newIsSelect3;
    },
    changeIsTimeOperator(newIsTimeOperator) {
      this.isTimeOperator = newIsTimeOperator;
    },
    changePredictLock(newPredictLock) {
      this.predictLock = newPredictLock;
    },

    getTotalData(newData) {
      this.totalData = newData;
      // this.loading = true; // 开始加载
      // setTimeout(() => {
      //   console.log("数据加载完成");
      //   this.loading = false;
      // }, 3000);
    },
    changeSelectSign(newData) {
      this.selectSign = newData;
      // console.log(this.selectSign);
    },
    changeSelectView(newData) {
      this.selectView = newData;
      // console.log(this.selectView);
    },
    /**
     * setOnLoadingFlag.
     * @constructor
     * @param {function} apiHandler - api function to request.
     */
    setOnLoadingFlag(apiHandler) {
      this.loading = true;
      try {
        apiHandler();
      } catch (e) {
        console.log(e);
      } finally {
        this.loading = false;
        // setTimeout(() => {
        //   this.loading = false
        // })
      }
    },
  },
};
</script>

<style>
* {
  margin: 0;
  box-sizing: border-box;
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 0px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
}

.msg {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px;
  width: fit-content;
  /*color: var(--color1-dark);*/
  font-size: 20px;
  color: darkblue;
  font-weight: bolder;
  letter-spacing: 1px;
  border-radius: 10px;
  animation: showmsg 500ms ease;
  z-index: 9999;
  /*background-color: var(--color2-light);*/
  background-color: lightblue;
  display: flex;
  align-items: center;
  justify-content: space-around;
  box-shadow: 0px 0px 2px 2px #8bbbed;
}

.el-icon {
  font-size: 20pt;
  margin: 0 10px;
}

.el-icon.ok-icon {
  color: green;
}

.el-icon.err-icon {
  color: red;
}
</style>
